//商城首页 by KB

import MuiSlider from "../components/mui/MuiSlider.js";

let lf = liefeng,
    doAction = lf.appJs.doAction,
    doLocation = lf.appJs.doLocation;

let Header = React.createClass({
    // liftClick(){
    //     lf.appJs.doClose();
    // },
    componentDidMount(){

      $('.left-icon').on('tap',()=>{
         lf.appJs.doClose();
      })
      
      $('.toIndex').on('tap',()=>{
          doLocation('shopping-index.html','')
      })

      $('.toKind').on('tap',()=>{
          doLocation('shopping-kinds.html','')
      })
    
    },
    render(){
      return(
        <header className="header">
            <div className="header-icon left-icon">
                <i className="mui-icon mui-icon-arrowleft"/>
            </div>
            <div className="tap">
                <a className="toIndex active" href="javascript:;">首页</a>
                <a className="toKind" href="javascript:;">分类</a>
            </div>
            <div className="header-icon">
                <i className='mui-icon mui-icon-search' /> 
            </div>
        </header>
      )
    }
})

let Container = React.createClass({
    componentDidMount(){
      $('.toVegetable').on('tap',()=>{
         doAction('shopping-item-list.html?categoryId=537','智能设备')
      })
    },
    render(){
        
        let imgDefault = ['../public/images/finger/ad1.jpg','../public/images/finger/ad2.jpg','../public/images/finger/ad3.jpg'];


        return(
            <div className="shopping-index">
              <Header />
              <MuiSlider height="2.1" imgList={imgDefault} indicator="true" autoPlay='true' loop={true} interval={2000}/>
              <a className="block toVegetable" href="javascript:;">
                <img src="../public/images/finger/kind.jpg" />
              </a>
              <a className="block" href="javascript:;">
                <img src="../public/images/finger/love.jpg" />
              </a>
              <a className="block" href="javascript:;">
                <img src="../public/images/finger/suggest.jpg" />
              </a>
            </div>
        )
    }
})

lf.bridgeJs.getUser(function (user){
    console.log(user)
    React.render(
        <Container user={user} />,
        document.getElementById('root'), function () {
            $('#root').css('background', 'none');
        }
    )
})
